<template>
	<view class="chase_to_kill">
		<view class="navbar">
			<view class="nav_view">
				<view class="back" @click="deviceBack()">
					<image :src="`${baseImageUrl}/common/back.png`"></image>
					<view>江湖追讨</view>
				</view>
				<view class="money">
					<image :src="type_src"></image>
					<text>{{property[type_field]}}</text>
				</view>
			</view>
		</view>
		<view class="btn_view">
			<view class="item" @click="router(`/pages/home/kill_ranking?type=${type_field}`)">排行榜</view>
			<view class="item" @click="router(`/pages/home/kill_record?type=${type_field}`)">记录</view>
		</view>
		<scroll-view scroll-y class="scroll_view">
			<view class="content">
				<view class="select_view">
					<!-- <view class="select_item" @click="open(1)"> -->
					<view class="select_item" @click="$u.toast('敬请期待')">
						<image :src="type_src" class="gy_icon"></image>
						<text>{{type_name}}追讨</text>
						<image :src="`${baseImageUrl}/kills/s1.png`" class="down"></image>
					</view>
					<view class="time_box" v-if="is_blank">
						<text>本期结算中</text>
					</view>
					<view class="time_box" v-else>
						<text class="value">{{second}}</text>
						<text>秒后捕快出现</text>
					</view>
				</view>
				<view class="content_view">
					<view class="view_item" :class="lock_id==item.room_id?'acvive':''" v-for="(item,index) in room_list"
						:key="item.room_id" @click="selected(item.room_id,index)">
						<view class="view_box">
							<view class="number">
								<image :src="type_src"></image>
								<text>{{item.invest}}</text>
							</view>
							<view class="room_name">{{item.room_name}}</view>
							<image :src="`${baseImageUrl}/add/m1.png`" class="door"
								:style="{height:killer_show&&killerIndex!=(index+1)?'28rpx':'0'}" v-if="index==0">
							</image>
							<image :src="`${baseImageUrl}/add/m2.png`" class="door"
								:style="{width:killer_show&&killerIndex!=(index+1)?'74rpx':'0'}" v-if="index==1">
							</image>
							<image :src="`${baseImageUrl}/add/m3.png`" class="door"
								:style="{height:killer_show&&killerIndex!=(index+1)?'83rpx':'0'}" v-if="index==2">
							</image>
							<image :src="`${baseImageUrl}/add/m4.png`" class="door"
								:style="{height:killer_show&&killerIndex!=(index+1)?'38rpx':'0'}" v-if="index==3">
							</image>
							<image :src="`${baseImageUrl}/add/m5.png`" class="door"
								:style="{width:killer_show&&killerIndex!=(index+1)?'56rpx':'0'}" v-if="index==4">
							</image>
							<image :src="`${baseImageUrl}/add/m6.png`" class="door"
								:style="{height:killer_show&&killerIndex!=(index+1)?'84rpx':'0'}" v-if="index==5">
							</image>
							<image :src="`${baseImageUrl}/add/m7.png`" class="door"
								:style="{height:killer_show&&killerIndex!=(index+1)?'48rpx':'0'}" v-if="index==6">
							</image>
							<image :src="`${baseImageUrl}/add/m8.png`" class="door"
								:style="{height:killer_show&&killerIndex!=(index+1)?'34rpx':'0'}" v-if="index==7">
							</image>
						</view>
					</view>
				</view>
				<view class="role">
					<image :src="`${baseImageUrl}/kill_apng/m_2.png`" class="role_image"></image>
					<image :src="`${baseImageUrl}/kill_apng/m_2.png`" class="role_image"></image>
					<image :src="`${baseImageUrl}/kill_apng/m_2.png`" class="role_image"></image>
					<image :src="`${baseImageUrl}/kill_apng/m_2.png`" class="role_image"></image>
					<image :src="`${baseImageUrl}/kill_apng/m_2.png`" class="role_image"></image>
					<image :src="`${baseImageUrl}/kill_apng/m_2.png`" class="role_image"></image>
					<image :src="`${baseImageUrl}/kill_apng/m_2.png`" class="role_image"></image>

					<view class="role_image" :class="is_pursue?`animation${item.room_id}`:''" :style="item.style"
						v-for="(item,idx) in pursue_list">
						<view class="role_view">
							<text class="role_id">{{item.id}}</text>
							<image :src="`${baseImageUrl}/kill_apng/m_2.png`" class="cover"></image>
						</view>
					</view>

					<view class="role_image role_robot" :class="is_pursue?`animation${item.room_id}`:''"
						:style="item.style" v-for="(item,idx) in robot_list">
						<view class="role_view">
							<text class="role_id">{{item.id}}</text>
							<image :src="`${baseImageUrl}/kill_apng/m_2.png`" class="cover"></image>
						</view>
					</view>

					<view class="my" :class="index>0?`animation${index}`:''" :style="style">
						<view class="my_view">
							<text class="my_id">{{my_id}}</text>
							<view class="my_number" v-if="invest">
								<image :src="type_src"></image>
								<text>{{invest}}</text>
							</view>
							<image :src="`${baseImageUrl}/kill_apng/m_1.png`" class="cover"></image>
						</view>
					</view>
					<view class="killer" :class="killerIndex>0?`animation${killerIndex}`:''">
						<view class="killer_view">
							<text class="killer_id">捕快</text>
							<image :src="`${baseImageUrl}/kill_apng/s_1.png`" class="cover"></image>
						</view>
					</view>
				</view>

				<view class="select">
					<view class="select_box">
						<view class="number">
							<view class="icon" @click="reduce">
								<image :src="`${baseImageUrl}/common/js.png`"></image>
							</view>
							<input type="text" placeholder="投入数量" v-model="number" @input="change_number">
							<view class="icon" @click="add">
								<image :src="`${baseImageUrl}/common/zj.png`"></image>
							</view>
						</view>
						<!-- <view class="number" @click="open(2)">
							<view class="view_item">
								<image :src="type_src"></image>
								<text>{{number}}</text>
							</view>
							<image :src="`${baseImageUrl}/kills/s1.png`"></image>
						</view> -->

						<view class="btn" @click="submit">投入</view>
					</view>
					<view class="tips">上期捕快去了【{{kill_room_name}}】</view>
				</view>
				<view class="parse_view">
					<u-parse :content="content" :previewImg="false"></u-parse>
				</view>
			</view>
		</scroll-view>

		<u-popup :show="popup_show" bgColor="transparent" :mode="mode" :round="10" @close="close">
			<ChaseType :list="list" @change="emitType" @close="close" v-if="popup==1" />
			<!-- <ChaseNumber :list="input_quantity" :url="type_src" :number="number" @change="emitNumber" @close="close"
				v-if="popup==2" /> -->
			<KillTime v-if="popup==3" />
			<KillResult :url="type_src" :room_name="room_name" :number="all_number" v-if="popup==4" />
			<KillReward :url="type_src" :profit="profit" @close="popup_show=false" v-if="popup==5" />
		</u-popup>
	</view>
</template>
<script>
	import {
		back_url,
		baseImageUrl,
		// captchaAppId
	} from "@/utils/config.js";
	import {
		pursueIndex,
		pursueRoom,
		pursueJoin,
		pursueSwitchRoom,
		pursueResult
	} from '@/request/api.js';
	import ChaseType from '@/components/home/ChaseType.vue';
	import ChaseNumber from '@/components/home/ChaseNumber.vue';

	import KillTime from "@/components/home/KillTime.vue";
	import KillResult from "@/components/home/KillResult.vue";
	import KillReward from "@/components/home/KillReward.vue";
	export default {
		components: {
			ChaseType,
			ChaseNumber,

			KillTime,
			KillResult,
			KillReward
		},
		data() {
			return {
				my_id: "",
				property: {},
				second: 0,

				room_list: [], //房间名称
				kill_room_name: "", //捕快去的房间名称
				room_id: "", //捕快去的房间ID
				killerIndex: "", //捕快去的房间下标
				killer_show: "", //捕快是否即将出现

				invest: "", //投注的数量
				lock_id: "", //投注的房间ID
				lock_index: -1, //投注的房间ID
				index: "", //投注的房间下标
				is_blank: "", //是否在结算

				content: "",

				join: false, //当前是否参与
				pursue_period_id: "", //当期活动ID

				mode: "bottom",
				popup_show: false,
				popup: 1,

				room_name: "",
				all_number: "",
				profit: "",

				timer: null,
				robotTimer: null,
				timer_two: null,

				type_field: "",
				type_src: "",
				type_name: "",

				pursue_list: [],
				robot_list: [],

				is_pursue: false,

				list: [{
					name: "官银",
					field: "silver",
					url: `${baseImageUrl}/common/gy.png`
				}, {
					name: "粮食",
					field: "foodstuff",
					url: `${baseImageUrl}/common/hot_cover1.png`
				}, {
					name: "布匹",
					field: "cloth",
					url: `${baseImageUrl}/common/hot_cover2.png`
				}, {
					name: "房契",
					field: "titledeed",
					url: `${baseImageUrl}/common/hot_cover3.png`
				}, {
					name: "乐谱",
					field: "music",
					url: `${baseImageUrl}/common/hot_cover4.png`
				}, {
					name: "镖旗",
					field: "escort",
					url: `${baseImageUrl}/common/hot_cover5.png`
				}],

				input_quantity: [],
				number: 1,
				is_click: false,

				coordinate: [{
					left: '150rpx',
					top: '-850rpx'
				}, {
					left: '560rpx',
					top: '-850rpx'
				}, {
					left: '80rpx',
					top: '-580rpx'
				}, {
					left: '520rpx',
					top: '-660rpx'
				}, {
					left: '550rpx',
					top: '-530rpx'
				}, {
					left: '160rpx',
					top: '-160rpx'
				}, {
					left: '600rpx',
					top: '-270rpx'
				}, {
					left: '600rpx',
					top: '-120rpx'
				}],
				style: {},
				styles: {},

				backgroundAudio: null,
				bgm: "https://img.jhbytop.com/fhyg.MP3",

				killerAudio: null,
				killer_music: "https://img.jhbytop.com/hyb_troops_meleecombatlrg_01v2.00_gme.wav"
			}
		},
		onLoad() {
			this.my_id = this.$store.state.info.id;
			let item = this.list[0];
			this.type_src = item.url;
			this.type_name = item.name;
			this.type_field = item.field;
		},
		onShow() {
			this.getDeta();
			this.backgroundAudio = uni.createInnerAudioContext();
			this.backgroundAudio.loop = true;
			this.backgroundAudio.autoplay = true;
			this.backgroundAudio.src = this.bgm;
			this.backgroundAudio.onPlay(() => {
				console.log('开始播放');
			});
			this.backgroundAudio.onError((res) => {
				this.$u.toast(`音频出错:${res.errCode}`, );
			});

			this.killerAudio = uni.createInnerAudioContext();
			this.killerAudio.src = this.killer_music;
			this.killerAudio.onError((res) => {
				this.$u.toast(`捕快音频出错:${res.errCode}`, );
			});
		},
		onHide() {
			clearTimeout(this.timer);
			clearTimeout(this.robotTimer);
			clearTimeout(this.timer_two);
			if (this.backgroundAudio) {
				this.backgroundAudio.stop();
				this.backgroundAudio.destroy();
			}
			if (this.killerAudio) {
				this.killerAudio.stop();
				this.killerAudio.destroy();
			}
		},
		onUnload() {
			clearTimeout(this.timer);
			clearTimeout(this.robotTimer);
			clearTimeout(this.timer_two);
			if (this.backgroundAudio) {
				this.backgroundAudio.stop();
				this.backgroundAudio.destroy();
			}
			if (this.killerAudio) {
				this.killerAudio.stop();
				this.killerAudio.destroy();
			}
		},
		methods: {
			deviceBack(number) {
				let routes = getCurrentPages();
				let url = routes[routes.length - 1].route;
				if (back_url.includes(url)) {
					let number = this.$store.state.tabbarIndex;
					this.redirectRouter(number);
				} else {
					this.backRouter();
				}
			},
			createRobot() {
				if (this.is_blank) return false;
				let room = this.room_list;
				let random_room_number = uni.$u.random(2, 6);
				for (let i = 0; i < random_room_number; i++) {
					let random_index = uni.$u.random(1, room.length);
					let dataItem = room[random_index - 1];
					this.robot_list.push({
						room_id: dataItem.room_id,
						id: uni.$u.random(11, 9999),
					});
				};
				this.robotTimer = setTimeout(() => {
					this.createRobot();
				}, 4000);
			},
			start_animation() {
				this.is_pursue = false;
				let room = this.room_list;
				let list = [];
				room.forEach((item, index) => {
					let random_size = uni.$u.random(2, 5);
					for (let i = 0; i < random_size; i++) {
						let temp = {
							room_id: item.room_id,
							id: uni.$u.random(11, 9999),
						};
						list.push(temp)
					}
				});
				this.is_pursue = true;
				this.pursue_list = list;
				let point = [{
					x: 140,
					y: 8
				}, {
					x: 140,
					y: 8
				}, {
					x: 40,
					y: 50
				}, {
					x: 100,
					y: 8
				}, {
					x: 100,
					y: 8
				}, {
					x: 140,
					y: 40
				}, {
					x: 100,
					y: 10
				}, {
					x: 70,
					y: 8
				}];
				setTimeout(() => {
					list.forEach(item => {
						let index = item.room_id - 1;
						let point_item = point[index];
						let x = this.$u.random(1, point_item.x);
						let y = this.$u.random(1, point_item.y);
						let is = this.$u.random(1, 2);
						if (is == 1) {
							x = `-${x}rpx`;
							y = `-${y}rpx`;
						} else {
							x = `${x}rpx`;
							y = `${y}rpx`;
						}
						item.style = {
							transform: "translate(" + x + "," + y + ")"
						}
					});
					this.createRobot();
				}, 3 * 1000);
			},
			async get_pursue_room() {
				clearTimeout(this.timer);
				let {
					room
				} = await pursueRoom({
					field: this.type_field,
					period_id: this.pursue_period_id
				});
				this.room_list = room;
				this.timer = setTimeout(() => {
					this.get_pursue_room();
				}, 5 * 1000);
			},
			async getDeta() {
				clearTimeout(this.timer);
				// clearTimeout(this.robotTimer);
				clearTimeout(this.timer_two);
				let {
					silver,
					foodstuff,
					cloth,
					titledeed,
					music,
					escort,

					setting,
					room,
					ing,
					upper,
					pursue_period_user,
					input_quantity
				} = await pursueIndex({
					field: this.type_field
				});
				this.content = setting?.content;
				this.room_list = room;
				this.kill_room_name = upper?.kill_room_name;

				let lock_id = pursue_period_user?.room_id;

				let index = room.findIndex(item => item.room_id == lock_id);
				if (index > -1) {
					this.style = this.coordinate[index];
					this.lock_index = index;
				}
				this.lock_id = lock_id;
				this.invest = pursue_period_user?.invest;

				this.pursue_period_id = ing.id;

				this.start_animation();
				// this.timer = setInterval(() => {
				// 	this.get_pursue_room();
				// }, 5 * 1000);

				let end = ing.end,
					end_open = ing.end_open;

				let current = new Date().getTime();
				current = (current / 1000).toFixed(0);

				if (end > current) {
					let diff = Number(end) - current;
					this.second = diff;
					// this.second = 10;
					this.handTimer();
				} else if (current <= current && current < end_open) {
					this.handOpen();
				};

				this.property = {
					silver,
					foodstuff,
					cloth,
					titledeed,
					music,
					escort
				};

				// if (!this.input_quantity.length) {
				// 	this.input_quantity = input_quantity;
				// 	this.number = input_quantity[0];
				// }
			},
			async restDeta() {
				let {
					silver,
					foodstuff,
					cloth,
					titledeed,
					music,
					escort,

					room,
					pursue_period_user
				} = await pursueIndex({
					field: this.type_field
				});
				this.invest = pursue_period_user?.invest;
				let lock_id = pursue_period_user?.room_id;

				let index = room.findIndex(item => item.room_id == lock_id);
				if (index > -1) {
					this.style = this.coordinate[index];
					this.lock_index = index;
				}
				this.lock_id = lock_id;

				this.property = {
					silver,
					foodstuff,
					cloth,
					titledeed,
					music,
					escort
				};
			},
			handTimer() {
				let number = this.second;
				if (number == 0) {
					clearTimeout(this.timer_two);
					// clearTimeout(this.robotTimer);
					this.handOpen();
				} else {
					this.timer_two = setTimeout(() => {
						number--;
						this.second = number;
						this.handTimer();
					}, 1000);
				}
			},
			async handOpen() {
				this.is_blank = true;
				this.killer_show = true;

				clearTimeout(this.timer);
				clearTimeout(this.robotTimer);
				clearTimeout(this.timer_two);
				this.open(3, 'center');

				this.timer_two = setTimeout(async () => {
					let {
						room_name,
						all_number,
						profit,
						is_join,
						kill_room
					} = await pursueResult({
						field: this.type_field,
						pursue_period_id: this.pursue_period_id
					});
					this.popup_show = false;

					let room_list = this.room_list;
					let killerIndex = room_list.findIndex(item => item.room_id == kill_room);
					this.killerIndex = killerIndex + 1;

					this.room_name = room_name;
					this.all_number = all_number;
					this.profit = profit;

					setTimeout(() => {
						this.killerAudio.play();
					}, 3.5 * 1000);

					if (is_join == 0) {
						setTimeout(() => {
							this.is_pursue = false;
							this.killerIndex = "";
							this.killer_show = false;
							this.pursue_list = [];
							this.killerAudio.stop();
						}, 10 * 1000);
						setTimeout(() => {
							this.is_blank = false;
							this.getDeta();
						}, 17 * 1000);
						return false;
					}

					setTimeout(() => {
						this.open(4, 'center');
					}, 3.5 * 1000);

					setTimeout(() => {
						this.lock_id = "";
						this.index = "";
						this.lock_index = -1;
						this.invest = "";
						this.is_pursue = false;
						this.killerIndex = "";
						this.killer_show = false;
						this.pursue_list = [];

						this.style = {
							left: "147rpx",
							top: "55rpx"
						};
						this.open(5, 'center');
					}, 10 * 1000);

					setTimeout(() => {
						this.is_blank = false;
						this.getDeta();
					}, 17 * 1000);
				}, 5 * 1000);
			},
			// 选择某个房间
			async selected(id, index) {
				if (this.is_blank) return false;
				this.room_id = id;
				if (this.lock_index <= -1) {
					this.index = index + 1;
					this.lock_index = index;
					return false;
				};
				if (!this.lock_id) {
					this.index = "";
					this.style = this.coordinate[index];
					return false;
				}
				await pursueSwitchRoom({
					field: this.type_field,
					room_id: id,
					period_id: this.pursue_period_id
				});
				setTimeout(async () => {
					// let {
					// 	room,
					// 	pursue_period_user
					// } = await pursueIndex({
					// 	field: this.type_field
					// });
					// this.invest = pursue_period_user?.invest;
					// let lock_id = pursue_period_user?.room_id;

					// let index = room.findIndex(item => item.room_id == lock_id);
					// if (index > -1) {
					// 	this.style = this.coordinate[index];
					// 	this.lock_index = index;
					// }
					// this.lock_id = lock_id;
					this.restDeta();
					this.index = "";
					this.style = this.coordinate[index];
				}, 200);
			},
			async submit() {
				let {
					is_click,
					number,
					room_id
				} = this;
				if (is_click) {
					this.$u.toast("请等待服务器结果");
					return false;
				}

				if (!room_id) {
					this.$u.toast("请选择房间");
					return false;
				}
				if (!number) {
					this.$u.toast("请选择数量");
					return false;
				}
				this.is_click = true;
				await pursueJoin({
					field: this.type_field,
					number,
					room_id: String(room_id)
				}, {
					custom: {
						catch: true
					}
				}).then(res => {
					this.lock_id = room_id;
					this.silver = res.balance;
					this.restDeta();
					this.get_pursue_room();
					this.$u.toast("操作成功");

					this.is_click = false;
				}).catch(() => {
					this.is_click = false;
				});
			},
			open(index, mode) {
				this.mode = mode ?? "bottom";
				this.popup = index;
				this.popup_show = true;
			},
			close() {
				this.popup_show = false;
			},
			emitType(item) {
				this.type_src = item.url;
				this.type_name = item.name;
				this.type_field = item.field;
				this.getDeta();
				this.close();
			},
			change_number(e) {
				e.target.value = e.target.value.replace(/^0|[^\d]|[.]/g, "");
				this.$nextTick(() => {
					this.number = e.target.value;
				});
			},
			reduce() {
				if (this.number == 0) {
					this.$u.toast("不可减少了");
					return false;
				}
				this.number--;
			},
			add() {
				this.number++;
			},
			emitNumber(value) {
				this.number = value;
				this.close();
			}
		}
	}
</script>

<style scoped lang="scss">
	@import url("@/pages/animation/animation.scss");

	.chase_to_kill {
		min-height: 100vh;
		background: url(#{$baseImageUrl}/kills/bg1.png) no-repeat;
		background-size: 100% 100%;

		.navbar {
			width: 100%;
			height: $navbarHeight;
			padding: 0 14rpx 12rpx;
			box-sizing: border-box;
			// background: url(@/static/images/kills/nav.png) no-repeat;
			background: url(#{$baseImageUrl}/kills/nav.png) no-repeat;
			background-size: 100% 100%;
			display: flex;
			justify-content: space-between;
			align-items: flex-end;
			position: relative;
			z-index: 99999;

			.nav_view {
				width: 100%;
				display: flex;
				justify-content: space-between;

				.back {
					display: flex;
					align-items: center;

					image {
						width: 62rpx;
						height: 31rpx;
					}

					view {
						color: #FFFFFF;
						font-size: 36rpx;
						font-weight: 400;
						font-family: LiSu;
					}
				}

				.money {
					min-width: 154rpx;
					height: 36rpx;
					background: #37302A;
					display: flex;
					align-items: center;
					position: relative;

					image {
						width: 42rpx;
						height: 42rpx;
						position: absolute;
						left: -21rpx;
						top: -3rpx;
					}

					text {
						color: #FFFEFE;
						font-size: 30rpx;
						font-weight: 400;
						padding-left: 38rpx;
						box-sizing: border-box;
					}
				}
			}
		}

		.btn_view {
			position: fixed;
			right: 0;
			top: 50%;
			transform: translateY(-50%);
			z-index: 33;

			.item {
				width: 178rpx;
				height: 66rpx;
				line-height: 66rpx;
				color: #FFFFFF;
				font-size: 24rpx;
				margin: 6rpx 0;
				padding-left: 90rpx;
				box-sizing: border-box;

				&:first-child {
					background: url(#{$baseImageUrl}/kills/btn1.png) no-repeat;
					background-size: 100% 100%;
				}

				&:last-child {
					background: url(#{$baseImageUrl}/kills/btn2.png) no-repeat;
					background-size: 100% 100%;
				}
			}
		}

		.scroll_view {
			height: calc(100vh - #{$navbarHeight});

			.content {
				.select_view {
					height: 122rpx;
					display: flex;
					justify-content: space-between;
					align-items: flex-end;

					.select_item {
						width: 246rpx;
						height: 86rpx;
						padding: 0 26rpx 0 20rpx;
						box-sizing: border-box;
						background: url(#{$baseImageUrl}/kills/btn.png) no-repeat;
						background-size: 100% 100%;
						display: flex;
						justify-content: space-between;
						align-items: center;

						text {
							color: #FFFFFF;
							font-size: 28rpx;
							font-weight: 400;
						}

						.gy_icon {
							width: 42rpx;
							height: 42rpx;
						}

						.down {
							width: 24rpx;
							height: 24rpx;
						}
					}

					.time_box {
						width: 385rpx;
						height: 122rpx;
						text-align: center;
						padding-top: 50rpx;
						padding-right: 68rpx;
						box-sizing: border-box;
						background: url(#{$baseImageUrl}/kills/time.png) no-repeat;
						background-size: 100% 100%;

						text {
							color: #FFFFFF;
							font-size: 26rpx;

							&.value {
								font-size: 40rpx;
							}
						}
					}

				}

				.content_view {
					width: 100%;
					height: 913rpx;
					// background: url(@/static/images/add/bg2.png) no-repeat;
					background-size: 100% 100%;
					position: relative;

					.view_item {
						position: absolute;

						.view_box {
							width: 100%;
							height: 100%;
							position: relative;

							.mask {
								width: 100%;
								height: 100%;
								position: absolute;
								left: 0;
								top: 0;
								z-index: 2;
							}

							.number {
								display: flex;
								align-items: center;
								position: absolute;
								right: 20rpx;
								bottom: 18rpx;
								z-index: 2;

								image {
									width: 30rpx;
									height: 30rpx;
								}

								text {
									color: #FFFFFF;
									font-size: 30rpx;
									font-weight: 400;
									padding-left: 8rpx;
									box-sizing: border-box;
								}
							}

							.room_name {
								width: 100rpx;
								height: 36rpx;
								line-height: 30rpx;
								text-align: center;
								color: #000000;
								font-size: 24rpx;
								font-weight: 400;
								font-family: SimSun;
								background: url(#{$baseImageUrl}/kills/name.png) no-repeat;
								background-size: 100% 100%;
								position: absolute;
								left: 10rpx;
								top: 18rpx;
								z-index: 2;
							}

						}

						&:nth-child(1) {
							width: 345rpx;
							height: 153rpx;
							background: url(#{$baseImageUrl}/kills/1.png) no-repeat;
							background-size: cover;
							left: 0;
							top: 5rpx;

							&.acvive {
								background: url(#{$baseImageUrl}/kills/11.png) no-repeat;
								background-size: cover;
							}

							.door {
								width: 25rpx;
								height: 0rpx;
								// height: 28rpx;
								transition: height 1s;
								position: absolute;
								left: 65rpx;
								bottom: 16rpx;
							}
						}

						&:nth-child(2) {
							width: 333rpx;
							height: 153rpx;
							background: url(#{$baseImageUrl}/kills/2.png) no-repeat;
							background-size: cover;
							right: 0;
							top: 0;

							&.acvive {
								background: url(#{$baseImageUrl}/kills/22.png) no-repeat;
								background-size: cover;
							}

							.door {
								// width: 74rpx;
								width: 0;
								height: 14rpx;
								transition: width 1s;
								position: absolute;
								left: 125rpx;
								bottom: 17rpx;
							}
						}

						&:nth-child(3) {
							width: 201rpx;
							height: 323rpx;
							background: url(#{$baseImageUrl}/kills/3.png) no-repeat;
							background-size: cover;
							left: 0;
							top: 222rpx;

							&.acvive {
								background: url(#{$baseImageUrl}/kills/33.png) no-repeat;
								background-size: cover;
							}

							.view_box {
								.number {
									left: 14rpx;
									bottom: 57rpx;
								}

								.room_name {
									top: 23rpx;
									left: 7rpx;
								}

								.door {
									width: 22rpx;
									// height: 83rpx;
									height: 0;
									transition: height 1s;
									position: absolute;
									right: 20rpx;
									top: 93rpx;
								}
							}
						}

						&:nth-child(4) {
							width: 276rpx;
							height: 156rpx;
							background: url(#{$baseImageUrl}/kills/4.png) no-repeat;
							background-size: cover;
							right: 66rpx;
							top: 197rpx;

							&.acvive {
								background: url(#{$baseImageUrl}/kills/44.png) no-repeat;
								background-size: cover;
							}

							.door {
								width: 16rpx;
								// height: 38rpx;
								height: 0;
								transition: height 1s;
								position: absolute;
								left: 10rpx;
								top: 63rpx;
							}
						}

						&:nth-child(5) {
							width: 354rpx;
							height: 135rpx;
							background: url(#{$baseImageUrl}/kills/5.png) no-repeat;
							background-size: cover;
							right: 0rpx;
							top: 344rpx;

							&.acvive {
								background: url(#{$baseImageUrl}/kills/55.png) no-repeat;
								background-size: cover;
							}

							.door {
								// width: 56rpx;
								width: 0;
								height: 20rpx;
								transition: width 1s;
								position: absolute;
								left: 70rpx;
								bottom: 10rpx;
							}
						}

						&:nth-child(6) {
							width: 382rpx;
							height: 272rpx;
							background: url(#{$baseImageUrl}/kills/6.png) no-repeat;
							background-size: cover;
							left: 0rpx;
							bottom: 0rpx;

							&.acvive {
								background: url(#{$baseImageUrl}/kills/66.png) no-repeat;
								background-size: cover;
							}

							.door {
								width: 20rpx;
								// height: 84rpx;
								height: 0;
								transition: height 1s;
								position: absolute;
								right: 12rpx;
								top: 66rpx;
							}
						}

						&:nth-child(7) {
							width: 302rpx;
							height: 179rpx;
							background: url(#{$baseImageUrl}/kills/7.png) no-repeat;
							background-size: cover;
							right: 0rpx;
							bottom: 146rpx;

							&.acvive {
								background: url(#{$baseImageUrl}/kills/77.png) no-repeat;
								background-size: cover;
							}

							.door {
								width: 20rpx;
								// height: 48rpx;
								height: 0;
								transition: height 1s;
								position: absolute;
								left: 5rpx;
								top: 54rpx;
							}
						}

						&:nth-child(8) {
							width: 242rpx;
							height: 139rpx;
							background: url(#{$baseImageUrl}/kills/8.png) no-repeat;
							background-size: cover;
							right: 0rpx;
							bottom: 43rpx;

							&.acvive {
								background: url(#{$baseImageUrl}/kills/88.png) no-repeat;
								background-size: cover;
							}

							.door {
								width: 12rpx;
								// height: 34rpx;
								height: 0;
								transition: height 1s;
								position: absolute;
								left: 12rpx;
								top: 56rpx;
							}
						}
					}
				}

				.role {
					width: 100%;
					height: 146rpx;
					padding-top: 20rpx;
					padding-left: 20rpx;
					box-sizing: border-box;
					position: relative;

					.role_image {
						width: 35rpx;
						height: 50rpx;
						animation-timing-function: linear;
						animation-fill-mode: forwards;
						position: absolute;
						left: -150rpx;
						top: 55rpx;

						&.role_robot {
							animation-fill-mode: none;
							left: -300rpx;
							top: 55rpx;
						}

						.role_view {
							width: 35rpx;
							height: 50rpx;
							display: flex;
							flex-direction: column;
							position: relative;

							.role_id {
								white-space: nowrap;
								color: #FFFFFF;
								font-size: 24rpx;
								position: absolute;
								left: 50%;
								top: -30rpx;
								transform: translateX(-50%);
							}

							image.cover {
								width: 35rpx;
								height: 50rpx;
								position: static;
							}
						}

						&:nth-child(1) {
							left: 20rpx;
							top: 20rpx;
						}

						&:nth-child(2) {
							left: 36rpx;
							top: 70rpx;
						}

						&:nth-child(3) {
							left: 60rpx;
							top: 43rpx;
						}

						&:nth-child(4) {
							left: 91rpx;
							top: 23rpx;
						}

						&:nth-child(5) {
							left: 85rpx;
							top: 66rpx;
						}

						&:nth-child(6) {
							left: 133rpx;
							top: 21rpx;
						}

						&:nth-child(7) {
							left: 111rpx;
							top: 76rpx;
						}

						&.animation1 {
							animation-duration: 3.5s;
							animation-name: myfirst;
						}

						&.animation2 {
							animation-duration: 3.5s;
							animation-name: myfirst2;
						}

						&.animation3 {
							animation-duration: 3s;
							animation-name: myfirst3;
						}

						&.animation4 {
							animation-duration: 3s;
							animation-name: myfirst4;
						}

						&.animation5 {
							animation-duration: 3s;
							animation-name: myfirst5;
						}

						&.animation6 {
							animation-duration: 2s;
							animation-name: myfirst6;
						}

						&.animation7 {
							animation-duration: 2.5s;
							animation-name: myfirst7;
						}

						&.animation8 {
							animation-duration: 2.5s;
							animation-name: myfirst8;
						}

					}

					.killer {
						width: 35rpx;
						height: 50rpx;
						animation-timing-function: linear;
						animation-fill-mode: forwards;
						position: absolute;
						left: -50rpx;
						top: 55rpx;

						.killer_view {
							width: 35rpx;
							height: 50rpx;
							display: flex;
							flex-direction: column;
							position: relative;

							.killer_id {
								white-space: nowrap;
								color: #FFFFFF;
								font-size: 24rpx;
								position: absolute;
								left: 50%;
								top: -30rpx;
								transform: translateX(-50%);
							}

							image.cover {
								width: 35rpx;
								height: 50rpx;
								position: static;
							}
						}

						&.animation1 {
							animation-duration: 4s;
							animation-name: killer_first;
						}

						&.animation2 {
							animation-duration: 4s;
							animation-name: killer_first2;
						}

						&.animation3 {
							animation-duration: 3.5s;
							animation-name: killer_first3;
						}

						&.animation4 {
							animation-duration: 3.5s;
							animation-name: killer_first4;
						}

						&.animation5 {
							animation-duration: 3.5s;
							animation-name: killer_first5;
						}

						&.animation6 {
							animation-duration: 2.5s;
							animation-name: killer_first6;
						}

						&.animation7 {
							animation-duration: 3s;
							animation-name: killer_first7;
						}

						&.animation8 {
							animation-duration: 3s;
							animation-name: killer_first8;
						}
					}

					.my {
						width: 35rpx;
						height: 50rpx;
						animation-timing-function: linear;
						animation-fill-mode: forwards;
						position: absolute;
						left: 147rpx;
						top: 55rpx;

						.my_view {
							width: 35rpx;
							height: 50rpx;
							display: flex;
							flex-direction: column;
							position: relative;

							.my_id {
								white-space: nowrap;
								color: #FFFFFF;
								font-size: 24rpx;
								position: absolute;
								left: 50%;
								top: -30rpx;
								transform: translateX(-50%);
							}

							.my_number {
								width: auto;
								height: 50rpx;
								display: flex;
								align-items: center;
								position: absolute;
								left: 40rpx;
								top: 50%;
								transform: translateY(-50%);

								image {
									width: 24rpx;
									height: 24rpx;
								}

								text {
									color: #FFFFFF;
									font-size: 24rpx;
								}
							}

							image.cover {
								width: 35rpx;
								height: 50rpx;
								position: static;
							}
						}

						&.animation1 {
							animation-duration: 3.5s;
							animation-name: myfirst;
						}

						&.animation2 {
							animation-duration: 3.5s;
							animation-name: myfirst2;
						}

						&.animation3 {
							animation-duration: 3s;
							animation-name: myfirst3;
						}

						&.animation4 {
							animation-duration: 3s;
							animation-name: myfirst4;
						}

						&.animation5 {
							animation-duration: 3s;
							animation-name: myfirst5;
						}

						&.animation6 {
							animation-duration: 2s;
							animation-name: myfirst6;
						}

						&.animation7 {
							animation-duration: 2.5s;
							animation-name: myfirst7;
						}

						&.animation8 {
							animation-duration: 2.5s;
							animation-name: myfirst8;
						}
					}
				}

				.select {
					height: 140rpx;
					margin-top: 85rpx;
					padding: 0 30rpx;
					box-sizing: border-box;
					position: relative;

					.select_box {
						width: 100%;
						height: 140rpx;
						position: relative;
						z-index: 2;

						.number {
							flex: 1;
							// width: 260rpx;
							height: 140rpx;
							padding: 0 220rpx 0 60rpx;
							box-sizing: border-box;
							background: url(#{$baseImageUrl}/kills/btn3.png) no-repeat;
							background-size: 100% 100%;
							box-sizing: border-box;
							display: flex;
							align-items: center;

							.icon {
								width: 80rpx;
								height: 80rpx;

								image {
									width: 100%;
									height: 100%;
								}
							}

							input {
								flex: 1;
								height: 80rpx;
								color: #494338;
								font-size: 28rpx;
								font-weight: 400;
								font-family: SimSun;
								border-radius: 10rpx;
								box-shadow: 2rpx -1rpx 10rpx 0px rgba(3, 0, 0, 0.2);
								padding-left: 40rpx;
								box-sizing: border-box;
								// background: #C0B5B6;
							}
						}

						// .number {
						// 	width: 260rpx;
						// 	height: 140rpx;
						// 	padding: 0 46rpx 0 32rpx;
						// 	box-sizing: border-box;
						// 	background: url(#{$baseImageUrl}/kills/btn3.png) no-repeat;
						// 	background-size: 100% 100%;
						// 	display: flex;
						// 	justify-content: space-between;
						// 	align-items: center;
						// 	position: absolute;
						// 	top: 0;
						// 	z-index: 2;

						// 	.view_item {
						// 		display: flex;
						// 		align-items: center;

						// 		image {
						// 			width: 42rpx;
						// 			height: 42rpx;
						// 		}

						// 		text {
						// 			color: #FFFFFF;
						// 			font-size: 36rpx;
						// 			font-weight: 400;
						// 			padding-left: 10rpx;
						// 			box-sizing: border-box;
						// 		}
						// 	}

						// 	image {
						// 		width: 40rpx;
						// 		height: 40rpx;
						// 	}
						// }

						.btn {
							width: 220rpx;
							height: 140rpx;
							line-height: 1;
							text-align: center;
							color: #FFFFFF;
							font-size: 36rpx;
							font-weight: 400;
							padding-top: 50rpx;
							box-sizing: border-box;
							background: url(#{$baseImageUrl}/kills/btn4.png) no-repeat;
							background-size: 100% 100%;
							position: absolute;
							right: 0rpx;
							top: 0;
						}
					}

					.tips {
						width: 291rpx;
						height: 142rpx;
						line-height: 1;
						color: #000000;
						font-size: 18rpx;
						font-weight: 400;
						font-family: SimSun;
						padding: 48rpx 0 76rpx 74rpx;
						box-sizing: border-box;
						background: url(#{$baseImageUrl}/kills/tips.png) no-repeat;
						background-size: 100% 100%;
						position: absolute;
						left: 120rpx;
						bottom: 80rpx;
					}
				}

				.parse_view {
					color: #fff;
					font-size: 32rpx;
					font-weight: 400;
					font-family: SimSun;
				}
			}
		}
	}
</style>